<script setup>
  //1. 模版语法 - 标签文本展示
  /**
   * 文本数据展示: 
   *    1. 插值表达式  {{ 数据的key || 对象.属性 || 数组[index] || 方法() || 运算 +-* / 三元运算...}}
   *        {{}} -> 不是识别标签! 直接添加到标签的文本区 <开始标签>{{ key }}<结束标签>
   *        <开始标签 v-text="vue的数据">  [不推荐]   都不识别字符串中带标签
   *        <开始标签 v-html="vue的数据">  识别字符串中带标签
   */
  let name = "张三";  //vue
  let age  = 18;
  let user = {
     account:"root",
     nickname:"ergouzi"
  }
  let stars = ['a','b','c']
  let starsNum = ()=>stars.length;

  let msg = "<font color='red'>账号不可使用!!</font>";
</script>

<template>
    <div>
      用户名: {{name}}  &nbsp; &nbsp; 年龄: {{ age + '岁' }} || 是否成年: {{age>=18?'是':'否'}}
      <br>
      登录账号: {{user.account}} 昵称: {{user.nickname}}
      <br>
      我喜欢的明星: {{stars}}  || {{stars[0]}} || {{starsNum()}}
      <br>
      <p> {{msg}}</p>
      <p v-text="msg"></p>
      <p v-html="msg"></p>
    </div>

</template>

<style scoped>
</style>
